<template>
  <div class="config-preview">
    <div class="preview-section">
      <h5>基础信息</h5>
      <div class="preview-item">
        <span class="label">配置名称:</span>
        <span class="value">{{ config.configName || '-' }}</span>
      </div>
      <div class="preview-item">
        <span class="label">项目名称:</span>
        <span class="value">{{ config.projectName || '-' }}</span>
      </div>
    </div>

    <div class="preview-section">
      <h5>资产配置</h5>
      <div class="preview-item">
        <span class="label">交易对:</span>
        <span class="value">{{ config.baseAsset || 'BASE' }}/{{ config.quoteAsset || 'QUOTE' }}</span>
      </div>
      <div class="preview-item">
        <span class="label">区块链:</span>
        <span class="value">{{ config.chainId || '-' }}</span>
      </div>
      <div class="preview-item">
        <span class="label">合约地址:</span>
        <span class="value contract-address">{{ formatAddress(config.contractAddress) }}</span>
      </div>
    </div>

    <div class="preview-section">
      <h5>交易配置</h5>
      <div class="preview-item">
        <span class="label">购买金额:</span>
        <span class="value">{{ formatAmount(config.buyAmount) }}</span>
      </div>
      <div class="preview-item">
        <span class="label">目标报价:</span>
        <span class="value">{{ formatAmount(config.targetBuyQuote) }}</span>
      </div>
    </div>

    <div class="preview-section">
      <h5>其他配置</h5>
      <div class="preview-item">
        <span class="label">代理:</span>
        <el-tag :type="config.proxyEnabled ? 'success' : 'info'" size="small">
          {{ config.proxyEnabled ? '启用' : '禁用' }}
        </el-tag>
      </div>
      <div class="preview-item">
        <span class="label">通知URL:</span>
        <span class="value">{{ config.notifyUrl || '未设置' }}</span>
      </div>
    </div>

    <!-- 自定义配置预览 -->
    <div v-if="parsedCustomConfig" class="preview-section">
      <h5>自定义配置</h5>
      <div v-for="(value, key) in parsedCustomConfig" :key="key" class="preview-item">
        <span class="label">{{ key }}:</span>
        <span class="value">{{ value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => ({})
  }
})

// 解析自定义配置
const parsedCustomConfig = computed(() => {
  if (!props.config.customConfig) return null

  try {
    const parsed = JSON.parse(props.config.customConfig)
    return Object.keys(parsed).length > 0 ? parsed : null
  } catch (error) {
    return null
  }
})

// 格式化地址（显示前6位和后4位）
const formatAddress = (address) => {
  if (!address) return '-'
  if (address.length <= 10) return address
  return `${address.slice(0, 6)}...${address.slice(-4)}`
}

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return '0'
  return Number(amount).toLocaleString()
}
</script>

<style lang="scss" scoped>
.config-preview {
  .preview-section {
    margin-bottom: 20px;

    h5 {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 4px;
    }

    .preview-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid #f5f7fa;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 13px;
        color: #606266;
        white-space: nowrap;
      }

      .value {
        font-size: 13px;
        color: #303133;
        text-align: right;
        word-break: break-all;
        max-width: 150px;

        &.contract-address {
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          font-size: 11px;
        }
      }
    }
  }
}
</style>